<template>
  <div>
    <el-dialog class="dialog" title="二维码下载" :visible.sync="dialogVisible">
      <el-table class="table" :data="computedDownloadQR" border>
        <el-table-column prop="size" label="尺寸（分辨率）"></el-table-column>
        <el-table-column prop="area" label="使用场景"></el-table-column>
        <el-table-column prop="dis" label="扫描距离（米）"></el-table-column>
        <el-table-column label="二维码下载">
          <template slot-scope="scope">
            <a class="download" v-if="!!scope.row.src" :href="scope.row.src" :download="scope.row.size" target="_blank">下载</a>
            <span v-if="!scope.row.src" style="font-size:13px;color: #666666">未获取URL</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script type="text/babel">
  export default {
    data () {
      return {
        msg: 'download qr',
        dialogVisible: false
      }
    },
    computed: {
      computedDownloadQR () {
        return [
          {
            size: '小(430*430)',
            area: '手机端、PC端',
            dis: '0.5米',
            src: this.urlContainer.urlQrDownS
          },
          {
            size: '中(800*800)',
            area: 'PC端、大屏幕',
            dis: '1米',
            src: this.urlContainer.urlQrDownM
          },
          {
            size: '大(1600*1600)',
            area: '大屏幕、印刷',
            dis: '2.5米',
            src: this.urlContainer.urlQrDownB
          }
        ]
      }
    },
    props: ['urlContainer'],
    methods: {
      init () {
        this.dialogVisible = true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
